<template>
	<view class="yun-content">
		<view class="owned">
			<view class="owned-item">
				<view class="_left">头像</view>
				<view hover-class="yun-hover" class="owned-right">
					<view class="owned-name"></view>
					<button style="border:0;margin: 0;padding: 0;" class="_right" plain open-type="chooseAvatar"
						@chooseavatar="onChooseAvatar">
						<u--image :showLoading="true" :src="userInfo.avatar" width="60rpx" height="60rpx" shape="circle" />
						<u-icon name="arrow-right" size="26" color="#ccc" />
					</button>
				</view>
			</view>
			<view class="owned-item">
				<view class="_left">昵称</view>
				<view class="owned-right" hover-class="yun-hover" @click="handleNickname">
					<view class="owned-name"></view>
					<view class="_right">
						{{userInfo.nickname}}
						<u-icon name="arrow-right" size="26" color="#ccc" />
					</view>
				</view>
			</view>
			<view v-if="false" class="owned-item">
				<view class="_left">用户ID</view>
				<view class="owned-right">
					<view class="owned-name"></view>
					<view class="_right">
						{{userInfo.unionid}}
					</view>
				</view>
			</view>
			<view class="owned-item">
				<view class="_left">手机号</view>
				<view class="owned-right">
					<view class="owned-name"></view>
					<view class="_right">
						{{userInfo.phone}}
					</view>
				</view>
			</view>
		</view>
		<!-- 编辑昵称模态框 -->
		<u-modal :show="showModal" :closeOnClickOverlay=false title="编辑昵称">
			<view class="modal-content">
				<u--input type="text" focus v-model="nickname" :maxlength='15' placeholder="请输入新昵称" style="width: 100%;" />
			</view>
			<view class="modal-btns" slot="confirmButton">
				<u-button @click="showModal = false">取消</u-button>
				<u-button type="primary" @click="saveNickname" :loading="loadingSaveNickname">保存</u-button>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		editUserInfo
	} from '@/xiaoyun/api/user.js'
	import {
		uploadImg
	} from '@/xiaoyun/api/utils.js'
	export default {
		computed: {
			...mapGetters('plugins', ['systemBarHeight']),
			...mapGetters('user', ['userInfo', 'openid'])
		},
		data() {
			return {
				nickname: '',
				showModal: false,
				loadingSaveNickname: false
			}
		},
		methods: {
			onChooseAvatar(e) {
				let that = this
				console.log('获取头像', e);
				const {
					avatarUrl
				} = e.detail; // 获取用户选择的头像URL
				let imageDataArray = []
				uni.uploadFile({
					url: that.$baseurl + '/upload_img', // 上传图片接口
					filePath: avatarUrl,
					name: 'image[]',
					formData: {
						// appid: 'wx1e3cf4547f6354a3',
						openid: that.openid,
					},
					success: (r) => {
						console.log('嘤嘤嘤', r);
						let res = JSON.parse(r.data)
						console.log('res',res);
						if(res.code===200){
							that.saveAvatar(res.data.img_arr[0])
							return
						}
						uni.showToast({
							title: res.msg,
							icon: 'fail',
							duration: 3000
						});
					},
					fail:(err) =>{
						uni.showToast({
							title: err,
							icon: 'fail',
							duration: 3000
						});
					}
				});
			},
			saveAvatar(url) {
				console.log('进来了',url);
				editUserInfo({
					avatar: url,
					openid: this.openid
				}).then(res => {
					console.log('修改头像',res);
					if (res.code === 200) {
						this.$store.commit('user/SET_USER_AVATAR', url)
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1500
						});
						this.showModal = false
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'fail',
							duration: 3000
						});
					}
				}).catch(err => {
					console.log('修改头像失败',err);
					uni.showToast({
						title: '修改头像失败',
						icon: 'none',
						duration: 3000
					});
				})
			},
			// 修改昵称
			saveNickname() {
				this.loadingSaveNickname = true
				editUserInfo({
					nickname: this.nickname,
					openid: this.openid
				}).then(res => {
					console.log('修改昵称',res);
					if (res.code === 200) {
						this.$store.commit('user/SET_USER_NICKNAME', this.nickname)
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1500
						});
						this.showModal = false
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'fail',
							duration: 3000
						});
					}
				}).catch(err => {
					uni.showToast({
						title: '修改昵称失败',
						icon: 'none',
						duration: 3000
					});
				}).finally(() => {
					this.loadingSaveNickname = false
				})
			},
			handleNickname() {
				this.showModal = true
				this.nickname = this.userInfo.nickname
			}
		}
	}
</script>

<style scoped lang="scss">
	.owned {
		margin-top: 50rpx;
		background-color: #fff;
		box-shadow: 0 1.5px 4px 0 #00000005;

		.owned-item {
			display: flex;
			align-items: center;
			padding-left: 20rpx;

			&:last-child .owned-right {
				border-color: transparent;
			}

			&.btn {
				line-height: 0;
				background: transparent;
				border: 0;
				font-size: 28rpx;
				padding-right: 0;

				&::after {
					border: none;
				}
			}

			.owned-right {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 20rpx;
				height: 100%;
				padding: 30rpx 20rpx 30rpx 0;
				border-bottom: 1px solid #f1f1f1;

				._right {
					display: flex;
					color: #9296A6;
					font-size: 26rpx;

					::v-deep .u-icon {
						margin-left: 6rpx;
					}
				}
			}
		}
	}

	.modal-content {
		width: 100%;
	}

	.modal-btns {
		display: flex;
		gap: 20rpx;
	}
</style>